<template>
  <div class="home">
    <div class="pay">
      <van-cell-group inset>
        <van-field v-model="phoneNumber" name="手机号"  placeholder="请输入办理的手机号"  right-icon="phone" ref="inputNumber" maxlength="11"
        autocomplete="off" type="number"  size="large"/>
      </van-cell-group>
      <div class="pay-submit">
        <div class="submit" @click="onSubmit">
          立即充值
        </div>
      </div>
    </div>
    <div class="desc">
      <div class="desc-title">话费充值说明</div>
      <div v-for="(item, index) in desc" :key="index" class="desc-content">
        <div v-html="item"></div>
      </div>
    </div>
 
    
  </div>
</template>
<script>
/* eslint-disable*/
import { ref, reactive, getCurrentInstance, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { showToast, showConfirmDialog } from 'vant'
import api from '../api/index'

export default {
  name: 'Home',
  setup() {
   
    // 活动规则
    const show = ref(false)
    const phoneNumber = ref()

    const reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
    const desc = reactive([
      '以下权益仅对于本次活动中购买会员的用户专有：',
      '1) 100元话费每个月可领取10元话费，需要在每个周期(默认为月)进行手动兑换，举例:在1月5号购买成功,1月5日至2月4日为第一个兑换间期，2月5日至3月4日为第二个领取周期，以此类推;',
      '2) 每个周期内可随时兑换话费,若某周期未兑换,则视为主动放弃该次领取资格，后续不做补发;',
      '3) 兑换话费时需输入抢购时的手机号，即可充值到账一般1~10分钟内充值成功);，',
      '4) 注:部分携号转网号码可能导致充值不成功',
      '5) 月得权益拥有对上述条款做最终解释的权利',
      '7) 如有疑问，可点<a href="http://kf.holyn.cn/mobile/index?code=sIEyy19fwiK8ELYdy3FkUkSNN1sLpcZ5jKi4MYA3XOG1NLxUpNmNLWcmz12qHQoQlj2s4iXw%2FzjgvtmomDR0VshLNZ5BAxBLxRoBsOnah8%2FS7vKKZuG9lF1RoudmuJT4VA">联系客服</a>进行咨询。'
    ])
    let currentInstance = ''

   
    const fnClickRules = () => {
      show.value = true
    }
  
    const fnClickPe = () => {
      window.open('http://kf.holyn.cn/mobile/index?code=sIEyy19fwiK8ELYdy3FkUkSNN1sLpcZ5jKi4MYA3XOG1NLxUpNmNLWcmz12qHQoQlj2s4iXw%2FzjgvtmomDR0VshLNZ5BAxBLxRoBsOnah8%2FS7vKKZuG9lF1RoudmuJT4VA')
    }
    // 提交按钮
    const onSubmit = () => {
      if (!phoneNumber.value) {
        showToast('请输入手机号')
       
        return
      }
      if (!reg_tel.test(phoneNumber.value)) {
        showToast('请输入正确手机号')
        return
      }
      getPaw()
    }
    const onChange = () => {
      if(phoneNumber.value.length === 11){
        
      }
    }
    const getPaw = () => {
      api.get('getRecharge', { phone: phoneNumber.value }).then(res => {
        if (res.code === 200) {
          const { count, orderNo } = res.data
          if (!count) {
            showToast('您的购买已到达上限')
            return
          }

            // getWxlink(orderNo)
        } else {
          showToast(res.message)
        }
      })
    }
    const getWxlink = (outTradeNo) => {
      const params =montageParams(outTradeNo)
      api.get('getWxLink', { ...params }).then(res => {
        if (res.code * 1 === 200) {
          location.href = res.data
        } else {
          router.push({
            path: '/result',
            query: {
              outTradeNo: outTradeNo,
              amount: amount,
              phoneNumber: phoneNumber.value,
              code:params.code,
              advert:params.advert,
              other:params.other
            }
          })
        }
      })
    }
    // 整理参数
    const montageParams=(outTradeNo)=>{
      let code ='',advert='cat',other = 0 //唯一码 媒体类型 特殊字段
      if(!codeRe){
        if(bxmid){ 
          code =bxmid
          advert  ='cat'
        }else if(userkey){
          code =userkey
          advert  ='xmob'
          other=plid
        } else if(bc_tag){
          code =bc_tag
          advert  ='baichuan'
        }else{
          code =nadkey
          advert  ='nuohe'
        }
      }else{
        code = codeRe
        advert = urlController(location.href)?.advert 
        other = urlController(location.href)?.other || 0
        // operation = urlController(location.href)?.operation
      }
      const params = {
        outTradeNo: outTradeNo,
        amount: amount,
        phoneNumber: phoneNumber.value,
        code:code,
        advert:advert,
        other:other,
        operation:operation
      }
      localStorage.setItem("code", code);
      localStorage.setItem("advert", advert || '');
      localStorage.setItem("other", other);
      localStorage.setItem("phoneNumber", phoneNumber.value);
      localStorage.setItem("operation", operation);
      localStorage.setItem('route',location.hash)
      return params
    }
    const success = () => {
      location.href ='https://www.qhdyywlkj.com/download/app.html'
    }
    return {
      phoneNumber,
      show,
      desc,
      onSubmit,
      getPaw,
      getWxlink,
      montageParams,
      success
      // urlController
    }
  }
}
</script>
<style lang="scss" scoped>
.home {
  font-size: .14rem;
  color: #000;
  .title-red{
    font-size:0.08rem;
    color:red;
  }
 
  .pay-title {
    display: flex;
    align-items: center;

    div:nth-child(2) {
      font-size: 0.08rem;
      color: #666;
      margin-left: .02rem;
    }
  }

  .pay {
    background: #fff;
    margin: .05rem 4% 0 4%;
    text-align: left;
    padding: .05rem;
    font-size: .1rem;
    border-radius: .1rem;
    /deep/.van-cell {
      background-color: #f8f8f8 !important;
      border-radius: .1rem;
    }

    /deep/.van-field__control::-webkit-input-placeholder {
      color: #333;
      font-size: 0.12rem;
    }
    /deep/.van-icon-phone{
      font-size:0.12rem;
      color:blue
    }
    .agree {
      font-size: .08rem;
      line-height: .2rem;
    }

    .payment {
      line-height: .15rem;
   
      /deep/.van-radio__label {
        display: flex;
        align-items: center;
      }

      div:nth-child(1) {
        display: flex;

        img {
          width: .15rem;
          margin-right: .05rem;
        }
      }

      display: flex;
      justify-content: space-between;
    }
  }

  .desc {
    margin: .05rem 4% 0 4%;
    border-radius: .1rem;
    background: #fff;

    .desc-title {
      font-size: .14rem;
      text-align: center;
      font-weight: 700;
      color: #666;
      padding: .05rem;
    }

    .desc-content {
      padding: 0 .08rem;
      line-height: .15rem;
      text-align: left;
      margin: .05rem 0;
      font-size: .05rem;
    }
  }

  .footer {
    margin: .1rem;
    font-size: .05rem;
    color: #717171;

    .gray {
      color: rgb(217, 217, 217);
      margin: .05rem 0;
    }
  }

  /deep/.van-popup--center {
    padding: .1rem;
    padding-top: .2rem;
  }

  .rules {
    .rules-title {
      text-align: center;
      font-weight: 700;
      font-size: .12rem;
      margin-bottom: .1rem;
    }

    div {
      line-height: .15rem;
      text-align: left;
      font-size: .05rem;
      margin-bottom: .15rem;
    }
  }
  .pay-submit{
    position: relative;
   }
  .submit {
    width: 80%;
    position: relative;
    background: linear-gradient(90deg, #279eff, #2787ff);
    box-shadow: 0 0.12rem 0.16rem 0 rgba(46, 78, 253, .15);
    color: white;
    text-align: center;
    height: .22rem;
    font-size: .2rem;
    line-height: .22rem;
    border-radius: 3rem;
    margin: .2rem auto;
    padding: .05rem;
  }

  .special-num {
    position: absolute;
    top: -0.13rem;
    right: 0rem;
    font-size: .09rem;
    background: red;
    color: #fff;
    padding: 0 0.1rem;
    height: 0.2rem;
    line-height: .2rem;
    border-radius: 0.1rem 0.2rem 0.2rem 0;
    z-index: 2;
  }
  .download{
    font-size: 0.12rem;
    padding: 0.09rem !important;
  }

  .public-color {
    color: #1576ff;
  }

  .public-red {
    color: #2787ff;
    font-size: 0.14rem;
    font-weight: 700;
  }

  .public-margin {
    white-space:nowrap;
    margin-top: .1rem;
  }

  .public-margin5 {
    margin-top: .05rem;
  }

  .public-margin15 {
    margin-top: .15rem;
  }

  .public-right {
    margin-right: .03rem;
  }

  .title {
    color: #000;
    text-align: left;
    font-size: .12rem;
    margin: .12rem 0;
    font-weight: 700;
  }

  .flex {
    display: flex;
  }

  .red {
    color: red;
  }

  .triangle {
    position: absolute;
    top: -1px;
    left: -1px;
    width: 0;
    height: 0;
    border-top: .3rem solid red;
    border-right: .3rem solid transparent;
  }

  .triangle-title {
    color: #fff;
    position: absolute;
    top: 0.05rem;
    left: 0;
    transform: rotate(-45deg);
  }
}

@keyframes bouncedelay {

  0%,
  100% {
    transform: scale(0.9);
  }

  50% {
    transform: scale(0.8);
  }
}</style>
